<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.etc.entity.User"%>
<%@page import="com.etc.service.impl.UserServiceImpl"%>
<%@page import="com.etc.service.UserService"%>
<%@page import="java.util.List"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
   if(null==request.getSession().getAttribute("user")){
	   request.getRequestDispatcher("login.jsp").forward(request, response);
   }
%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> -->

<title>Dashboard Template for Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">

<script src="dist/js/jquery-3.3.1.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
<script src="layui.js"></script>
<link rel="stylesheet" href="css/layui.css" media="all">
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
   .navbar .nav > li:hover .dropdown-menu {
		display: block;
	}
</style>
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<ul class="nav navbar-nav">
					<li class="dropdown">
					    <a class="navbar-brand" href="#">问答系统</a>
						<a style="margin-left: 100px;" href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false">欢迎~${user.userName}~登录管理系统<span class="caret"></span></a>
						<ul class="dropdown-menu" style="margin-left: 100px;">
							<li><a href="#">个人信息</a></li>
							<li><a href="#">切换账号</a></li>
							<li><a href="#">退出</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
				    <li><a id="imfor" href="#"></a></li>
					<li><a href="#">仪表盘</a></li>
					<li><a href="#">设置</a></li>
					<li><a href="LoginServlet?op=exit">退出</a></li>
					<li id="btnLo"><a id="modal-27331" href="#modal-container-27331"
						role="button" class="btn" data-toggle="modal">登录</a></li>
					<li id="btnExit" style="display: none;"><a href="${pageContext.request.contextPath}/UserServlet?op=queryPage" class="btn">退出</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" id="searchName" class="form-control" placeholder="Search..." value="${nameLike==null?"":nameLike}">
					<input type="button" id="btnSearch" class="form-control" value="搜索">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="index.jsp">首页 <span class="sr-only">(current)</span></a>
					</li>
					<li><a href="qs?op=queryPage">问答信息管理</a></li>
					<li><a href="addQuestion.jsp">增加问答信息</a></li>
					<li><a href="ab?op=queryPage">回答信息管理</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li class="active"><a href="${pageContext.request.contextPath}/UserServlet?op=queryPage">用户管理</a></li>
					<li><a href="addUser.jsp">新增用户</a></li>
					<li><a href="EmpServlet?op=queryPage">员工管理</a></li>
					<li><a href="">Another nav item</a></li>
					<li><a href="">More navigation</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <br/><br/><br/><br/>
				<h2 class="sub-header">用户管理</h2>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>id</th>
								<th>用户名</th>
								<th>密码</th>
								<th>性别</th>
								<th>电话号码</th>
								<th>地址</th>
								<th>权限</th>
								<th>状态</th>
							</tr>
						</thead>
						<tbody>
						<c:if test="${pd.data!=null}">
							<c:forEach items="${pd.data}" var="user">
							<tr>
								<td>${user.userId}</td>
								<td>${user.userName}</td>
								<td>${user.passWord}</td>
								<td>${user.userSex}</td>
								<td>${user.userTel}</td>
								<td>${user.userAdress}</td>
								<td>${user.userLevel == 0 ? "管理员" : "普通用户"}</td>
								<td>${user.userState == 0 ? "异常用户" : "正常用户"}</td>
								<td>
								<input type="checkbox" name="switch"  lay-text="开启|停用"  checked="" lay-skin="switch">
								<a id="modal-27331" href="#modal-container-27332" role="button" class="btn btn-warning update" data-toggle="modal">修改</a>
								<a id="del" href="javascript:delFunction(${user.userId})"><button id="btnDelete" class="btn btn-danger">删除</button></a></td>
							</tr>
							</c:forEach>
						</c:if>
						</tbody>
					</table>
					<div class="container">
						<div class="row clearfix">
							<div class="col-md-12 column">
								<ul class="pagination">
									<li><a href="javascript:void(0)" id="prePage" >Prev</a></li>
									<c:forEach begin="1" end="${pd.totalPage}" var="index">
									  <c:if test="${index>5}">
											<li style="display: none;"><a href="javascript:void(0)">....</a></li>
										</c:if>
										<c:if test="${index<=5}">
											<c:if test="${index==pd.page }">
												<li class="active"><a href="javascript:void(0)"
													class="pageNo">${index}</a></li>
											</c:if>
											<c:if test="${index!=pd.page }">
												<li><a href="javascript:void(0)" class="pageNo">${index}</a></li>
											</c:if>
										</c:if>
									</c:forEach>
									<li><a href="javascript:void(0)" id="nexPage">Next</a></li>
									<li style="pointer-events: none;"><a style="color: gray;"
										href="javascript:void(0)">共 ${pd.totalPage} 页</a></li>
									<li>~~~~~~到第<input
										style="width: 30px;" type="text" name="inputPage" id="inputPage"
										value="${pd.page}" />页
									</li>
									<li><button class="btn btn-success" id="btnToPage">确定</button></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="modal-container-27332" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div style="z-index: 10000;" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<form class="form-horizontal" role="form"
							action="${pageContext.request.contextPath}/UserServlet?op=update" method="post">
							<div class="form-group" style="display: none;">
								<label for="userId" class="col-sm-2 control-label">请输入要修改的id</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="userId" id="userId" />
								</div>
							</div>
							<div class="form-group">
								<label for="userName" class="col-sm-2 control-label">请输入要修改的用户名</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="userName" id="userName" />
								</div>
							</div>
							<div class="form-group">
								<label for="passWord" class="col-sm-2 control-label">请输入要修改的密码</label>
								<div class="col-sm-8">
									<input type="password" required="required" class="form-control"
										name="passWord" id="passWord" />
								</div>
							</div>

							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">请输入要修改的手机号码</label>
								<div class="col-sm-8">
									<input type="tel" required="required" class="form-control"
										name="userTel" id="userTel" />
								</div>
							</div>
							<div class="form-group">
								<label for="userAdress" class="col-sm-2 control-label">请输入要修改的居住地址</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="userAdress" id="userAdress" />
								</div>
							</div>
							<div class="form-group">
								<label for="userLevel" class="col-sm-2 control-label">请输入要修改的等级</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="userLevel" id="userLevel" />
								</div>
							</div>
							<div class="form-group">
								<label for="userState" class="col-sm-2 control-label">请输入要修改的状态</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="userState" id="userState" />
								</div>
							</div>
							<div class="form-group">
								<label for="userSex" class="col-sm-2 control-label">请输入要修改的性别</label>
								<div class="col-sm-2">
									<select class="form-control" name="userSex"
										id="userSex">
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-5 col-sm-1">
									<button type="submit" style="width: 100px;"
										class="btn btn-danger">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>

			</div>
		</div>
		<div class="modal fade mtmst" id="modal-container-27331" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div style="z-index: 10000;" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<div id="loginSucess" style="display: none;">登入成功，请关闭窗口</div>
						<form id="formLogin" class="form-signin" method="post" onsubmit="return check()">
							<h2 class="form-signin-heading">请登录</h2>
							<div id="msg" style="display: none;">用户名或密码错误</div>
							<label for="userNameLogin" class="sr-only">用户名</label> <input
								type="text" id="userNameLogin" name="userNameLogin" class="form-control"
								placeholder="用户名" required autofocus> <label
								for="passWordLogin" class="sr-only">密码</label> <input
								type="password" id="passWordLogin" name="passWordLogin" class="form-control"
								placeholder="密码" required>
							<div class="checkbox">
								<label> <input type="checkbox" value="remember-me">
									记住我
								</label>
							</div>
							<a><button id="btnlogin" class="btn btn-lg btn-primary btn-block"
								type="button">登录</button></a>
						</form>
					</div>
				</div>

			</div>
		</div>
	</div>
	<script src="layer.js"></script>
	<script type="text/javascript">
			$(function() {
				$("#btnlogin").click(function() {
					$.ajax({
						url: "${pageContext.request.contextPath}/UserServlet?op=login",
						type: "post",
						data: {
							"userNameLogin": $('#userNameLogin').val(),
							"passWordLogin": $('#passWordLogin').val()
						},
						success: function(data) { 
							if(data=="账号或密码错误"){
								$("#msg").css("display","block");
								$("#msg").css("color","red");
							}else{
								$("#btnLo").css("display","none");
								$("#btnExit").css("display","block");
								$("#imfor").text("欢迎"+data+"登录");
								$("#imfor").css("color","blue");
								$("#loginSucess").css("display","block");
								$("#formLogin").css("display","none");
							}
						}
					});
				});

			});
		</script>
	<script type="text/javascript">
	    $(function(){
			if(${pd.page >= pd.totalPage}){
				$("#nexPage").css("color","gray");
				$("#nexPage").css("pointer-events","none");
			}
			if(${pd.page<=1}){
				$("#prePage").css("color","gray");
				$("#prePage").css("pointer-events","none");
			}
			$(".pageNo").click(function(){
				location.href = "${pageContext.request.contextPath}/UserServlet?op=queryPage&page=" + $(this).text()+"&nameLike="+$("#searchName").val();
				console.log($(this).text());
			});
			$("#nexPage").click(function(){
				location.href="${pageContext.request.contextPath}/UserServlet?op=queryPage&page="+${pd.page+1}+"&nameLike="+$("#searchName").val();
			});
			$("#prePage").click(function(){
				location.href="${pageContext.request.contextPath}/UserServlet?op=queryPage&page="+${pd.page-1}+"&nameLike="+$("#searchName").val();
			});
			$("#btnSearch").click(function(){
				   var nameLike = $("#searchName").val();
				   location.href = "${pageContext.request.contextPath}/UserServlet?op=queryPage&nameLike="+nameLike;
			});
			$("#btnToPage").click(function(){
				location.href="UserServlet?op=queryPage&page="+$("#inputPage").val()+"&nameLike="+$("#searchName").val();
			});
	    });
	</script>
	<script type="text/javascript">
		function delFunction(userId) {
			layer.prompt({title: '请输入删除口令，并确认', formType: 1}, function(pass, index){
				  layer.close(index);
				  if(pass=="admin"){
					  layer.msg('删除成功');
					  location.href = "${pageContext.request.contextPath}/UserServlet?op=delete&userId=" + userId;
				  }else{
					  layer.msg('密码错误，删除失败');
				  }
			});
			/* layer.confirm('是否确认删除？', {
				btn : [ '确定', '取消' ]
			//按钮
			}, function() {
				location.href = "${pageContext.request.contextPath}/UserServlet?op=delete&userId=" + userId;
				layer.msg('删除成功', {
					time : 5000
				});
			}, function() {
				layer.msg('也可以这样', {
					time : 20000, //20s后自动关闭
					btn : [ '知道了' ]
				}, function() {
					location.reload();
				});
			}); */
		}
		/* function btnUpdate(userId){
			$("#userId").val(userId);
		} */
		$(".update").click(function(){
			$("#userId").val($(this).parents("tr").find("td").eq(0).text());
			$("#userName").val($(this).parents("tr").find("td").eq(1).text());
			$("#passWord").val($(this).parents("tr").find("td").eq(2).text());
			$("#userTel").val($(this).parents("tr").find("td").eq(4).text());
			$("#userAdress").val($(this).parents("tr").find("td").eq(5).text());
			$("#userSex").val($(this).parents("tr").find("td").eq(3).text());
		});
	</script>
</body>

</html>